<template>
	<view class="page-container">
		<view class="unified-sticky-container" :class="{ 'is-active': isHeaderSticky }">
			<view class="header-top">
				<u-icon name="arrow-left" bold color="#000" size="30rpx" @click="onBack()"></u-icon>
				<view class="header-address" @click="navigateToCitySelect">
					{{cityName}}
				</view>
				<u-icon name="arrow-down-fill" color="#000" size="30rpx"></u-icon>
				<view class="header-input">
					<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
					<!-- #ifndef APP-NVUE -->
					<u-input placeholder="搜索美食/特产/餐馆等" shape="circle" border="none" v-model="searchVal" color="#000"
						fontSize="26rpx" placeholder-style="color:rgba(120, 120, 130, 1)" clearable confirmType="search"
						@confirm="loadPosts(true)">
					<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholder="搜索美食/特产/餐馆等" shape="circle" border="none" v-model="searchVal"
							color="#000" fontSize="26rpx" placeholder-style="color:rgba(120, 120, 130, 1)" clearable
							confirmType="search" @confirm="loadPosts(true)">
						<!-- #endif -->
							<u-icon slot="prefix" name="search" color="rgba(120, 120, 130, 1)" size="30"></u-icon>
							<template slot="suffix">
								<text class="header-input-btn" type="text" size="mini"
									@click="loadTabData(currentIndex,true)">搜索</text>
							</template>
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</view>
			</view>
		</view>

		<view class="unified-sticky-container" :class="{ 'is-active': isTabSticky }"
			:style="{ top: isHeaderSticky ? firstStickyHeight : '0px' }">
			<view class="header-tabs-sticky">
				<view class="tab-item" v-for="(tabItem, index) in tabs" :key="index"
					:class="{ 'active': currentIndex === index }" @click="handleTabClick(index)">
					<view class="tab-content">
						<view class="tab-img">
							<image :src="currentIndex === index ? tabItem.activeUrl : tabItem.url" mode=""></image>
						</view>
						<text class="tab-top">{{ tabItem.topTitle }}</text>
					</view>
				</view>
			</view>
		</view>



		<view class="header">
			<view class="header-top">
				<u-icon name="arrow-left" bold color="#fff" size="30rpx" @click="onBack()"></u-icon>
				<view class="header-address" @click="navigateToCitySelect">
					{{cityName}}
				</view>
				<u-icon name="arrow-down-fill" color="#fff" size="30rpx"></u-icon>
				<view class="header-input">
					<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
					<!-- #ifndef APP-NVUE -->
					<u-input placeholder="搜索美食/特产/餐馆等" shape="circle" border="none" v-model="searchVal" color="#000"
						fontSize="26rpx" placeholder-style="color:rgba(120, 120, 130, 1)" clearable confirmType="search"
						@confirm="loadPosts(true)">
					<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholder="搜索美食/特产/餐馆等" shape="circle" border="none" v-model="searchVal"
							color="#000" fontSize="26rpx" placeholder-style="color:rgba(120, 120, 130, 1)" clearable
							confirmType="search" @confirm="loadPosts(true)">
						<!-- #endif -->
							<u-icon slot="prefix" name="search" color="rgba(120, 120, 130, 1)" size="30"></u-icon>
							<template slot="suffix">
								<text class="header-input-btn" type="text" size="mini"
									@click="loadTabData(currentIndex,true)">搜索</text>
							</template>
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</view>
			</view>
			<view class="header-bottom">
				<view class="custom-notice-bar">
					<view class="notice-icon">
						<image src="/static/index/featured/Notice.png" mode="aspectFit"></image>
					</view>
					<view class="notice-content">
						<view class="notice-wrapper" :animation="animationData">
							<view class="notice-item" v-for="(item, index) in noticeBarText" :key="index">
								<text class="notice-item-title">{{ item.title + '：' }}</text>
								<text class="notice-item-content" :class="{'ellipsis': true}">{{ item.content }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="top-tabs">
			<view class="tabs-container">
				<view class="tab-item" v-for="(tabItem, index) in tabs" :key="index"
					:class="{ 'active': currentIndex === index }" @click="handleTabClick(index)">
					<view class="tab-content">
						<text class="tab-top">{{ tabItem.topTitle }}</text>
						<text class="tab-bottom">{{ tabItem.bottomTitle }}</text>
					</view>
				</view>
			</view>
			<view class="content-img"></view>
		</view>

		<view class="footer" @touchstart="handleContentTouchStart" @touchend="handleContentTouchEnd"
			@touchmove="handleContentTouchMove">
			<view class="footer-lists" v-for="(listItem, index) in tabData[currentIndex].list" :key="index"
				@click="handleDetail(listItem)">
				<view class="footer-list">
					<view class="footer-list-left">
						<image :src="listItem.coverImage" mode="aspectFill"></image>
					</view>
					<view class="footer-list-right">
						<view class="footer-list-right-top">
							{{listItem.name}}
						</view>
						<view class="footer-list-right-middle">
							<view class="footer-list-right-middle-info" v-for="(info, its) in listItem.tags" :key="its">
								{{info}}
							</view>
						</view>
						<view class="footer-list-right-footer">
							{{listItem.description}}
						</view>
					</view>
				</view>
			</view>

			<!-- 加载状态提示 -->
			<view v-if="tabData[currentIndex].loading" class="loading-text">
				加载中...
			</view>
			<view v-if="tabData[currentIndex].finished && tabData[currentIndex].list.length > 0" class="loading-text">
				没有更多了
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCuisineList
	} from '@/request/api.js';
	export default {
		data() {
			return {
				searchVal: '',
				noticeBarText: [{
						title: '美食头条',
						content: '坐火车的9个新利好你体验了吗坐火车的9个新利好你体验了吗...'
					},
					{
						title: '美食头条',
						content: '最快纪录世界唯一！中国科技捷报频传热最快纪录世界唯一！中国科技捷报频传热'
					},
					{
						title: '美食头条',
						content: '坐火车的9个新利好你体验了吗坐火车的9个新利好你体验了吗...'
					}
				],
				animationData: {},
				animationInterval: null,
				tabs: [{
						topTitle: '走进小巷',
						bottomTitle: '人间烟火气',
						url: '/static/index/featured/tabs-zjxx.png',
						activeUrl: '/static/index/featured/tabs-zjxx-active.png',
					},
					{
						topTitle: '去大馆子',
						bottomTitle: '倍儿有面子',
						url: '/static/index/featured/tabs-qdgz.png',
						activeUrl: '/static/index/featured/tabs-qdgz-active.png',
					},
					{
						topTitle: '特产名菜',
						bottomTitle: '就是这个味儿',
						url: '/static/index/featured/tabs-tcmc.png',
						activeUrl: '/static/index/featured/tabs-tcmc-active.png',
					}
				],
				currentIndex: 0,

				// 为每个 tab 维护独立的数据
				tabData: {
					0: {
						list: [],
						page: 1,
						pageSize: 10,
						total: 0,
						loading: false,
						finished: false
					},
					1: {
						list: [],
						page: 1,
						pageSize: 10,
						total: 0,
						loading: false,
						finished: false
					},
					2: {
						list: [],
						page: 1,
						pageSize: 10,
						total: 0,
						loading: false,
						finished: false
					}
				},

				// 记录每个 tab 的滚动位置
				tabScrollPositions: {
					0: 0,
					1: 0,
					2: 0
				},

				// 记录页面滚动位置
				pageScrollTop: 0,

				queryParams: {
					category: 1,
					content: ''
				},

				// 吸顶
				isHeaderSticky: false,
				isTabSticky: false,
				firstStickyHeight: '0px',

				// 吸顶触发位置
				stickyThreshold: 200,

				// 左右滑动
				contentTouchStartX: 0,
				contentTouchEndX: 0,
				contentTouchStartTime: 0,
				contentTouchEndTime: 0,
			};
		},
		onLoad() {
			this.initAllTabsData();
		},
		mounted() {
			this.startAnimation();
			// 获取第一个吸顶元素的高度
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.unified-sticky-container').boundingClientRect(data => {
					if (data) {
						this.firstStickyHeight = data.height + 'px';
					}
				}).exec();

				// 获取吸顶位置
				this.getStickyPosition();
			});
		},
		beforeDestroy() {
			if (this.animationInterval) {
				clearInterval(this.animationInterval);
			}
		},
		// 触底加载更多
		onReachBottom() {
			// 只对当前激活的 tab 进行加载更多
			this.loadMoreData(this.currentIndex);
		},
		onPageScroll: function(e) {
			let scrollTop = e.scrollTop;
			this.pageScrollTop = scrollTop; // 记录当前页面滚动位置

			// 记录当前 tab 的滚动位置
			this.$set(this.tabScrollPositions, this.currentIndex, scrollTop);

			let shouldBeSticky = scrollTop > 10;
			if (this.isHeaderSticky !== shouldBeSticky) {
				this.isHeaderSticky = shouldBeSticky;
			}
			let shouldBeTabSticky = scrollTop > this.stickyThreshold;
			if (this.isTabSticky !== shouldBeTabSticky) {
				this.isTabSticky = shouldBeTabSticky;
			}
		},
		onShow() {
			// 页面显示时恢复当前 tab 的滚动位置
			if (this.tabScrollPositions[this.currentIndex] > 0) {
				this.$nextTick(() => {
					uni.pageScrollTo({
						scrollTop: this.tabScrollPositions[this.currentIndex],
						duration: 0 // 设置为0实现瞬间跳转
					});
				});
			}
		},
		computed: {
			cityName() {
				return this.$store.state.cityInfo.name
			},
		},
		methods: {
			// 初始化所有 tab 数据
			initAllTabsData() {
				for (let i = 0; i < this.tabs.length; i++) {
					this.loadTabData(i, true);
				}
			},
			handleContentTouchStart(event) {
				this.contentTouchStartX = event.touches[0].clientX;
				this.contentTouchStartTime = new Date().getTime();
				this.isContentSwiping = false;
			},

			// content区域触摸移动事件
			handleContentTouchMove(event) {
				// 可以在这里添加滑动过程中的效果
			},

			// content区域触摸结束事件
			handleContentTouchEnd(event) {
				this.contentTouchEndX = event.changedTouches[0].clientX;
				this.contentTouchEndTime = new Date().getTime();
				this.handleContentSwipeGesture();
			},
			// 处理content区域的滑动手势
			handleContentSwipeGesture() {
				const swipeDistance = this.contentTouchEndX - this.contentTouchStartX;
				const swipeTime = this.contentTouchEndTime - this.contentTouchStartTime;
				const swipeThreshold = 50; // 滑动阈值

				// 检查滑动距离是否超过阈值 且 滑动时间不太长（避免误判为滚动）
				if (Math.abs(swipeDistance) > swipeThreshold && swipeTime < 300) {
					// 防止重复触发
					if (this.isContentSwiping) return;
					this.isContentSwiping = true;

					if (swipeDistance > 0) {
						// 右滑 - 切换到上一个tab
						this.switchToPreviousTab();
					} else {
						// 左滑 - 切换到下一个tab
						this.switchToNextTab();
					}

					// 重置滑动状态
					setTimeout(() => {
						this.isContentSwiping = false;
					}, 300);
				}
			},

			// 去详情
			handleDetail(item) {
				const itemString = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages_sub/index/alley-food-detail/alley-food-detail?itemData=${itemString}`
				});
			},

			// 切换到上一个tab
			switchToPreviousTab() {
				if (this.currentIndex > 0) {
					this.currentIndex--;
					this.handleTabClick(this.currentIndex);
				}
			},

			// 切换到下一个tab
			switchToNextTab() {
				if (this.currentIndex < this.tabs.length - 1) {
					this.currentIndex++;
					this.handleTabClick(this.currentIndex);
				}
			},
			// 加载指定 tab 的数据
			loadTabData(tabIndex, refresh = false) {
				// 如果已经加载完成或正在加载，则不重复请求
				if (this.tabData[tabIndex].finished && !refresh) return;
				if (this.tabData[tabIndex].loading) return;

				this.tabData[tabIndex].loading = true;

				let params = {
					...this.queryParams,
					category: tabIndex + 1,
					name: this.searchVal,
					pageNum: refresh ? 1 : this.tabData[tabIndex].page,
					pageSize: this.tabData[tabIndex].pageSize
				};

				getCuisineList(params).then(res => {
					if (res.data && res.data.rows) {
						const newList = res.data.rows.map(item => ({
							...item,
							tags: item.tags ? item.tags.split(',').filter(t => t.trim()) : []
						}));

						if (refresh) {
							// 刷新数据
							this.tabData[tabIndex].list = newList;
							this.tabData[tabIndex].page = 1; // 重置页码
						} else {
							// 追加数据
							this.tabData[tabIndex].list = [...this.tabData[tabIndex].list, ...newList];
						}

						// 更新总数和是否加载完成状态
						this.tabData[tabIndex].total = res.data.total;
						// 优化分页完成判断逻辑
						this.tabData[tabIndex].finished = this.tabData[tabIndex].list.length >= res.data.total;
						// 页码增加
						this.tabData[tabIndex].page++;
					}
					this.tabData[tabIndex].loading = false;
				}).catch(error => {
					console.error('获取列表失败:', error);
					this.tabData[tabIndex].loading = false;
				});
			},

			// 触底加载更多数据
			loadMoreData(tabIndex) {
				// 如果已经加载完成或正在加载，则不重复请求
				if (this.tabData[tabIndex].finished || this.tabData[tabIndex].loading) return;

				this.tabData[tabIndex].loading = true;

				let params = {
					...this.queryParams,
					category: tabIndex + 1,
					content: this.searchVal,
					pageNum: this.tabData[tabIndex].page, // 使用当前页码
					pageSize: this.tabData[tabIndex].pageSize
				};

				getCuisineList(params).then(res => {
					if (res.data && res.data.rows) {
						const newList = res.data.rows.map(item => ({
							...item,
							tags: item.tags ? item.tags.split(',').filter(t => t.trim()) : []
						}));

						// 追加数据
						this.tabData[tabIndex].list = [...this.tabData[tabIndex].list, ...newList];

						// 更新总数和是否加载完成状态
						this.tabData[tabIndex].total = res.data.total;
						// 优化分页完成判断逻辑
						this.tabData[tabIndex].finished = this.tabData[tabIndex].list.length >= res.data.total;
						// 页码增加
						this.tabData[tabIndex].page++;
					}
					this.tabData[tabIndex].loading = false;
				}).catch(error => {
					console.error('获取列表失败:', error);
					this.tabData[tabIndex].loading = false;
				});
			},

			// 格式化图片URL
			formatImageUrl(url) {
				if (!url) {
					return '/static/default-image.png'; // 确保有默认图片
				}

				// 如果是相对路径，添加基础URL（根据你的实际域名修改）
				if (url.startsWith('/')) {
					return 'https://your-domain.com' + url; // 替换为你的实际域名
				}

				// 如果URL不包含协议，添加https
				if (!url.startsWith('http')) {
					return 'https://your-domain.com/' + url; // 替换为你的实际域名
				}

				return url;
			},

			// 图片加载错误处理
			handleImageError(index) {
				console.log(`图片加载失败，索引: ${index}`, this.list[index]);
			},

			startAnimation() {
				let currentIndex = 0;
				const itemHeight = 30;

				this.animationInterval = setInterval(() => {
					const animation = uni.createAnimation({
						duration: 500,
						timingFunction: 'ease'
					});

					animation.translateY(-(currentIndex * itemHeight) + 'rpx').step();
					this.animationData = animation.export();

					currentIndex++;
					if (currentIndex >= this.noticeBarText.length) {
						currentIndex = 0;
					}
				}, 2000);
			},

			// 获取吸顶位置
			getStickyPosition() {
				// 可以通过查询元素位置来动态获取吸顶位置
				const query = uni.createSelectorQuery().in(this);
				query.select('.top-tabs').boundingClientRect(data => {
					if (data) {
						// 吸顶位置为 top-tabs 距离顶部的距离
						this.stickyThreshold = data.top - 40;
					}
				}).exec();
			},

			handleTabClick(index) {
				// 如果点击的是当前 tab，不处理
				if (this.currentIndex === index) return;

				// 保存当前 tab 的滚动位置
				this.$set(this.tabScrollPositions, this.currentIndex, this.pageScrollTop);

				// 切换 tab
				this.currentIndex = index;

				// 根据标签切换更新查询参数
				this.queryParams.category = index + 1;

				// 如果该 tab 还没有数据，则加载数据
				if (this.tabData[index].list.length === 0) {
					this.loadTabData(index, true);
				}

				// 切换 tabs 时恢复滚动位置或滚动到吸顶位置
				this.$nextTick(() => {
					// 如果目标 tab 有滚动记录，则恢复到上次记录的位置
					if (this.tabScrollPositions[index] > 0) {
						uni.pageScrollTo({
							scrollTop: this.tabScrollPositions[index],
							duration: 0 // 设置为0实现瞬间跳转
						});
					} else {
						// 否则滚动到吸顶位置
						this.isTabSticky = true;
						uni.pageScrollTo({
							scrollTop: this.stickyThreshold + 4,
							duration: 0 // 设置为0实现瞬间跳转
						});
					}
				});
			},
			onBack() {
				uni.navigateBack();
			},
			navigateToCitySelect() {
				uni.navigateTo({
					url: '/pages_sub/common/city/city-select'
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		width: 100%;
		overflow-x: hidden; // 防止横向滚动

		// 吸顶容器
		.unified-sticky-container {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 998;
			background-color: rgba(255, 244, 216, 1);
			visibility: hidden;
			opacity: 0;
			transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

			// 第二个吸顶容器的特殊样式
			&:nth-child(2) {
				top: v-bind(firstStickyHeight + 'px');
			}

			// 为第一个吸顶容器单独添加 padding-top
			&:first-child {
				padding-top: var(--status-bar-height);
			}

			&.is-active {
				visibility: visible;
				opacity: 1;
			}

			.header-top {
				display: flex;
				align-items: center;
				padding: 20rpx;

				.header-address {
					margin: 0 10rpx;
					color: #000;
					font-size: 28rpx;
					font-weight: bold;
				}

				.header-input {
					flex: 1;
					height: 60rpx;
					border: 1px solid rgba(175, 128, 89, 1);
					border-radius: 30rpx;
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					background-color: #fff;

					.header-input-btn {
						width: 94rpx;
						text-align: center;
						margin-right: 6rpx;
						background-color: rgba(255, 123, 6, 1);
						border-radius: 30rpx;
						color: #fff;
						font-size: 26rpx;
						height: 50rpx;
						line-height: 50rpx;
					}
				}
			}

			.header-tabs-sticky {
				display: flex;
				margin: 0 30rpx;
				justify-content: space-between;

				.tab-item {
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					overflow: hidden;
					transition: all 0.3s ease;
					flex: 1;
					text-align: center;

					.tab-content {
						display: flex;
						align-items: center;

						.tab-img {
							width: 50rpx;
							height: 50rpx;
							margin-bottom: 10rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.tab-top {
							font-size: 26rpx;
							color: rgba(85, 49, 16, 1);
							font-weight: 400;
						}
					}

					// 选中状态样式
					&.active {
						.tab-content {
							.tab-img {
								width: 70rpx;
								height: 70rpx;
							}

							.tab-top {
								font-size: 30rpx;
								font-weight: bold;
								color: rgba(85, 49, 16, 1);
							}
						}
					}
				}
			}
		}

		.header {
			width: 100%;
			height: 436rpx;
			background-image: url('/static/index/featured/xzms-top-image.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: top left;
			position: relative;
			padding-top: var(--status-bar-height);

			.header-top {
				display: flex;
				align-items: center;
				padding: 20rpx;

				.header-address {
					margin: 0 10rpx;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
				}

				.header-input {
					flex: 1;
					height: 60rpx;
					border: 1px solid #fff;
					border-radius: 30rpx;
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					background-color: #fff;

					.header-input-btn {
						width: 94rpx;
						text-align: center;
						margin-right: 6rpx;
						background-color: rgba(255, 123, 6, 1);
						border-radius: 30rpx;
						color: #fff;
						font-size: 26rpx;
						height: 50rpx;
						line-height: 50rpx;
					}
				}
			}

			.header-bottom {
				background-image: url('/static/index/featured/xzms-bottom-img.png');
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				height: 63rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;

				.custom-notice-bar {
					display: flex;
					align-items: center;
					height: 100%;
					margin: 0 80rpx;

					.notice-icon {
						width: 36rpx;
						height: 36rpx;
						margin-right: 10rpx;
						flex-shrink: 0;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.notice-content {
						flex: 1;
						height: 30rpx;
						overflow: hidden;
						position: relative;

						.notice-wrapper {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;

							.notice-item {
								height: 30rpx;
								line-height: 30rpx;
								font-size: 26rpx;
								color: #333;
								display: flex;
								white-space: nowrap;

								.notice-item-title {
									color: rgba(85, 49, 16, 1);
									font-size: 26rpx;
									font-weight: bold;
									flex-shrink: 0;
								}

								.notice-item-content {
									color: rgba(85, 49, 16, 1);
									font-size: 26rpx;
									font-weight: 400;
									flex: 1;
									overflow: hidden;

									&.ellipsis {
										overflow: hidden;
										text-overflow: ellipsis;
									}
								}
							}
						}
					}
				}
			}
		}

		.top-tabs {
			background-color: rgba(255, 245, 216, 1);
			position: relative;

			.tabs-container {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 70rpx;
				gap: 30rpx;

				.tab-item {
					width: 180rpx;
					height: 120rpx;
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					overflow: hidden;
					background-image: url('/static/index/featured/tabs.png');
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center;
					transition: all 0.3s ease;

					// 添加边框装饰
					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						border-radius: 12rpx;
						z-index: 1;
					}

					.tab-content {
						position: relative;
						z-index: 2;
						text-align: center;
						font-weight: bold;

						.tab-top {
							font-size: 28rpx;
							line-height: 40rpx;
							display: block;
							color: rgba(0, 0, 0, 1);
						}

						.tab-bottom {
							font-size: 24rpx;
							line-height: 32rpx;
							display: block;
							color: rgba(85, 49, 16, 1);
						}
					}

					// 选中状态样式 - 使用更精确的选择器和更高的优先级
					&.active {
						// 使用不同的背景图
						background-image: url('/static/index/featured/tabs-active.png');
						background-repeat: no-repeat;
						background-size: cover;
						background-position: center;

						// 确保文字颜色为白色 - 使用 !important 并增加选择器权重
						.tab-content {
							color: #fff !important;
							text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
							/* 添加轻微阴影增强对比度 */
						}

						// 确保所有子元素都应用白色文字
						.tab-top,
						.tab-bottom {
							color: #fff !important;
						}
					}
				}
			}

			.content-img {
				background-image: url('/static/index/featured/xzms-content-img.png');
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				position: absolute;
				right: -90rpx;
				top: 140rpx;
				width: 340rpx;
				height: 206rpx;
				z-index: 1;
				opacity: 0.3;
			}
		}

		.footer {
			background-color: rgba(255, 245, 216, 1);
			padding-bottom: 30rpx;
			/* 添加底部内边距 */
			min-height: 100vh;

			.footer-lists {
				.footer-list {
					background-image: url('/static/index/featured/xzms-list-backImg.png');
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center;
					margin: 0 30rpx;
					margin-bottom: 30rpx;
					width: calc(100% - 60rpx);
					height: 310rpx;
					display: flex;
					border-radius: 12rpx;
					overflow: hidden;

					.footer-list-left {
						margin: auto 20rpx;
						width: 220rpx;
						height: 240rpx;
						flex-shrink: 0;
						border-radius: 8rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
							/* 图片圆角 */
							background-color: #f5f5f5;
							/* 加载时的背景色 */
						}
					}

					.footer-list-right {
						flex: 1;
						padding: 30rpx 20rpx;
						display: flex;
						flex-direction: column;

						.footer-list-right-top {
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 16rpx;
						}

						.footer-list-right-middle {
							display: flex;
							flex-wrap: wrap;
							gap: 10rpx;
							margin-bottom: 16rpx;

							.footer-list-right-middle-info {
								color: rgba(175, 141, 110, 1);
								box-sizing: border-box;
								border: 1px solid rgba(175, 141, 110, 1);
								border-radius: 20rpx;
								margin-right: 4rpx;
								padding: 0 20rpx;
								font-size: 22rpx;
								text-align: center;
								background-color: rgba(255, 240, 200, 1);
							}
						}

						.footer-list-right-footer {
							font-size: 26rpx;
							color: rgba(108, 72, 39, 1);
							line-height: 39rpx;
							height: 117rpx;
							text-indent: 1em;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}

			.loading-text {
				text-align: center;
				padding: 20rpx;
				color: #999;
				font-size: 26rpx;
			}
		}
	}
</style>